import React, { Component } from 'react';
import {
	StyleSheet, View, Text,
	Image, PixelRatio, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../config/global';
import { style } from '../../theme/style';

const scale = GLOBAL.SCALE;
export class PageMessageList extends Component {
	constructor(props) {
		super(props);
	}

	_callBack = () => {
		this.props.callBack();
	}

	render () {
		let { title, number, imgUrl } = this.props;
		let uriImg = { uri: '../../imgs/Group6.png' }
		return (
			<TouchableOpacity style={styles.listItem} onPress={() => { this._callBack() }}>
				<View style={styles.listBoxLeft}>
					<Image style={styles.listLog} source={imgUrl || uriImg} />
					<Text style={styles.listTitle}>{title}</Text>
				</View>
				{number > 0 ? (<Text style={styles.messageNo}>{number}</Text>) : null}
			</TouchableOpacity >
		)
	}
}

const styles = StyleSheet.create({
	listBox: {
		width: '100%'
	},
	listItem: {
		width: '100%',
		height: 73 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		backgroundColor: style.color.white,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.border,
		paddingRight: 25 * scale
	},
	listLog: {
		width: 40 * scale,
		height: 40 * scale,
		marginLeft: 15 * scale,
		marginRight: 17 * scale
	},
	listTitle: {
		fontSize: 14 * scale,
		color: style.color.dark,
	},
	listBoxLeft: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	messageNo: {
		paddingLeft: 10 * scale,
		paddingRight: 10 * scale,
		height: 18 * scale,
		backgroundColor: style.color.themeColor,
		color: '#fff',
		textAlign: 'center',
		borderRadius: 12 * scale,
		fontSize: 12 * scale,
	},
})